<template>
	<input 
		class="input" 
		@focus="hasFocus=true" 
		@blur="hasFocus=false" 
		@change="$emit('change', input.name, value)"
		:type="input.type" 
		:name="input.name" 
		:placeholder="input.placeholder" 
		v-model="value" 
		:style="[styles.cs, hasFocus?styles.focus:{}]" 
		maxlength="50" 
		autocomplete="off"
	/>
</template>

<script>
export default{
	data(){
		return{
			value: '',
			hasFocus: false
		}
	},
	props:{
		// 输入框设置绑定
		input:{
			type: Object,
			default: () => ({
				name: 'input',
				type: 'text',
				placeholder: '请输入',
				val: ''
			})
		},
		// 输入框样式，cs原状态，focus获取焦点状态
		styles:{
			type: Object,
			default: () => ({
				cs: {},
				focus: {}
			})
		}
	},
	mounted(){
		this.value = this.input.val;
	}
}
</script>

<style>
.input{
	width: 100%;
	height: 40px;
	padding: 10px;
	vertical-align: middle;
	border: 1px solid #ddd;
	border-radius: 4px;
	box-sizing: border-box;
	color: #aaa;
	font-size: 14px;
	outline: none;
	font-family: "PingFang SC,Hiragino Sans GB,Microsoft YaHei,sans-serif";
	transition: border-color .3s;
}
</style>
